import {View} from "@tarojs/components";
import React, { useEffect, useRef, useState} from "react";
import { Empty, Search, Tab, Tabs} from "@antmjs/vantui";
import {OrderItem} from "@/common/apis/model";
import {orderListApi} from "@/common/apis/home_datasource";
import LogUtils from "@/utils/log";
import Utils from "@/utils/common";
import AssetImage from "@/common/AssetImage";

import RouthPath from "@/common/RouthPath";
import {StatementItem} from "@/components/item_cell/item_cell";

definePageConfig({
  navigationBarTitleText: '对账单'
})
export default function Statement() {
  const tabs = useRef([
    {
      title: '全部',
      key: 0
    },
    {
      title: '待确认',
      key: 1
    },
    {
      title: '待付款',
      key: 2
    },
    {
      title: '已付款',
      key: 3
    },
    {
      title: '已拒绝',
      key: 4
    },
    {
      title: '代扣',
      key: 5
    }
  ]);
  return (
    <View>
      <Search
        placeholder='请输入订单号'
        disabled
        onClick={() => {
          Utils.navigateTo({
            url: RouthPath.searchStatement
          })
        }}
      />
      <Tabs
        active={0}
        sticky
        swipeThreshold={6}
        color='#56abe4'
      >
        {
          tabs.current.map((item, index) => (
            <Tab key={`tabs#demo1${index}`} title={item.title}>
              <View>
                <StatementList />
              </View>
            </Tab>
          ))
        }
      </Tabs>
    </View>
  )
}



function StatementList() {
  const [items, setItems] = useState<OrderItem[]>()

  useEffect(() => {
    orderListApi(1).then((res) => {
      setItems(res)
    })
    return () => {
      LogUtils.info("ProjectList", "useEffect")
    }
  }, []);
  return (
    <View style={{ paddingTop: '10px'}}>
      {
        items && !Utils.isEmpty(items) ? <View>
          {
            items.map((item, index) => {
              return <StatementItem key={index} item={item} />
            })
          }
        </View> : <Empty description='暂无数据' />
      }
    </View>
  )
}



